<template>
  <div>
    <NavBarVue :title="title" />
    <div class="my-password">
      <van-form class="form" @submit="onSubmit">
        <van-field v-model="oldPass" size="large" type="password" name="旧密码" placeholder="请输入旧密码" :rules="[{ required: true, message: '请填写旧密码' }]" style="font-size: 16px" />
        <van-field v-model="newPass" size="large" type="password" name="新密码" placeholder="请输入新密码" :rules="[{ required: true, message: '请填写新密码' }]" style="font-size: 16px" />
        <van-field v-model="newPass2" size="large" type="password" name="确认密码" placeholder="请确认新密码" :rules="[{ required: true, message: '请填写新密码' }]" style="font-size: 16px" />
        <div style="margin: 25px 16px 0">
          <van-button :loading="loading_submit" round block type="primary" color="#05A6F0" style="font-size: 18px">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import NavBarVue from "@/components/NavBar.vue";
import { Form, Field, Button, Toast } from "vant";
export default {
  name: "ChangePWD",
  components: {
    NavBarVue,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
  },
  props: ["title"],
  // 定义属性
  data() {
    return {
      oldPass: "",
      newPass: "",
      newPass2: "",
      loading_submit: false,
    };
  },
  // 方法集合
  methods: {
    onSubmit() {
      if (this.newPass != this.newPass2) {
        Toast("两次密码不一致");
        return;
      }
      this.loading_submit = true;
			this.$api.post('/PersonAccount/ModifyPassword',{oldPassword:this.oldPass,newPassword:this.newPass}).then(res=>{
				this.loading_submit = false;
				if(res.success){
					Toast.success('密码修改成功');
					this.onBack();
				}
				else{Toast.fail(res.msg)}
			})
    },
  },
};
</script>

<style scoped>
.my-password {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.my-password .form {
  padding: 80px 15px 0;
}
</style>
